<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			button {
				margin: 10px;
				width: 100px;
				height: 40px;
				cursor: pointer;
			}
			.current {
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<button>按钮1</button>
		<button>按钮2</button>
		<button>按钮3</button>
		<button>按钮4</button>
		<button>按钮5</button>
		
		<script type="text/javascript">
			//需求: 鼠标放在谁的button上改button变成黄色背景(添加类)
			//老三步
			//1.获取事件源和相关元素
			//2.绑定元素
			//3.书写事件驱动程序
			
			var btnArr = document.getElementsByTagName("button");
			for(var i = 0;i<btnArr.length;i++){
				btnArr[i].onmouseover = function (){
					//排他思想(干掉所有人，剩下我一个)
					for(var j = 0;j<btnArr.length;j++){
						btnArr[j].className = "";
					}
					this.className = "current";
				}
			}
			
		</script>
		
		
	</body>
</html>
